import React, { Component } from 'react'
import avator from '../assets/imgs/monkey.png'
import { connect } from 'dva'
class Sign extends Component {
  constructor () {
    super()
    this.state = {
      account: '',
      password: ''
    }
  }
  doSign (e) {
    e.preventDefault()
    let { account, password } = this.state
    if (!account.trim() || !password.trim()) {
      return alert('请先输入账号或密码！')
    }
    this.props.dispatch({type: 'login/login', payload: { account, password }})
  }
  render() {
    console.log(this.props)
    let { account, password } = this.state
    return (
      <div className="login">
        <div className="login-wrap">
          <div className="avatar">
            <img src={avator} className="img-circle" alt="" />
          </div>
          <form className="col-xs-offset-1 col-xs-10"onSubmit={ e => this.doSign(e) } >
            <div className="input-group input-group-lg">
              <span className="input-group-addon">
                <i className="fa fa-user"></i>
              </span>
              <input id="name" type="text" className="form-control" placeholder="用户名" 
                value={account} onChange={e => this.setState({account: e.target.value})} />
            </div>
            <div className="input-group input-group-lg">
              <span className="input-group-addon">
                <i className="fa fa-key"></i>
              </span>
              <input id="pass" type="password" className="form-control" placeholder="密码"
                value={password} onChange={e => this.setState({password: e.target.value})}/>
            </div>
            <button type="submit" className="btn btn-lg btn-primary btn-block">登 录</button>
          </form>
        </div>
      </div>
    )
  }
}
export default connect(state => {
  return {
    login: state.login
  }
})(Sign)